﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Img Change Demo 横向运动</title>
		<style type="text/css">
			body{
				margin: 0;
			}

			#box img{
				height: 100%;
			}

			#box div{
				position: absolute;
				height: 100%;
				width: 100%;
				/*图片横向运动*/
				-webkit-transition-duration : 0.5s;
				-webkit-transition-delay:	0s;
				-webkit-transition-property: all;
				-webkit-transition-timing-function: linear;
			}

			#box{
				position: absolute;
				left: 50%;
				width: 100px;
				height: 100px;
				overflow: hidden;
				cursor: pointer;
			}

			#img1{
				left: 0%;
			}

			#img2{
				left: 100%;
			}
		</style>
		<script type="text/javascript" src="../static/js/lib/jquery-1.7.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var nowImg = 1;
				var run = false;
				$("#box").bind("click", function(){
					if(run){
						return;
					}
					run = true;
					var Img = $("#img"+nowImg);
					Img.css({
						"-webkit-transition-duration" : "0.5s",
						"left" : "-100%"
					});
					/*绑定过渡结束事件*/
					Img.bind("webkitTransitionEnd", function(){
						Img.css({
							"-webkit-transition-duration" : "0s",
							"left" : "100%"
						});
						Img.unbind("webkitTransitionEnd");
						run = false;
					});
					nowImg++;
					if(nowImg > 2){
						nowImg = 1;
					}
					$("#img"+nowImg).css({
						"-webkit-transition-duration" : "0.5s",
						"left" : "0%"
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="box">
			<div id="img1">
				<img src="../static/img/img_2_2.jpg">
			</div>
			<div id="img2">
				<img src="../static/img/img_2_3.jpg">
			</div>
		</div>
	</body>
</html>